<template>
	<view class="parking-place parking-detail parking-detail2">
		<image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg-succ.jpg'"></image>
		<u-navbar leftText="停车场详情" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
			:bgColor="bgColor">
		</u-navbar>
		<view class="wp">
			<view class="park-cont">
				<view class="tabcont">
					<view class="laybox flex-col flex-c">
						<view class="lay-cont">
							<view class="list">

								<view class="li">
									<view class="item">
										<view class="row1">{{ parkInfo.title }}</view>
										<view class="row2 flex-cb">
											<view class="left">
												<view class="dd flex-ac">
													<view class="icon">
														<image 
														:src="imageUrl +'parking/icon_park.png'"
															mode="widthFix">
														</image>
													</view>
													<view class="info flex-ac">
														<view class="txt1">{{ parkInfo.lx }} <text>|</text></view>
														<view class="row3 flex-cb">
															<view class="per flex">
																<view class="txt1">
																	<text class="s3">53</text>
																</view>
																<view class="txt2">/ 60 </view>
															</view>
															<view class="step flex-ac">
																<view class="jd s3" style="width:75%"></view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="row4">
											<image :src="imageUrl +'parking/bg_dz.png'"  mode="widthFix" class="bg">
											</image>
											<view class="txt flex-cb">
												<view class="left flex-a flex-b">
													<view class="col1">
														<image 
														:src="imageUrl +'parking/icon_map.png'"
															mode="widthFix">
														</image>
													</view>
													<view class="col2 flex-a">详细地址详细地址详细地址详细地址详细地址详细地址</view>
												</view>
												<view class="col3">
													<view class="go">
														<image 
														:src="imageUrl +'parking/icon_go.png'"
															mode="widthFix">
														</image>
													</view>
													<view class="km">1.2km</view>
												</view>
											</view>
										</view>
										<view class="row5">
											<image :src="imageUrl +'parking/pic1.jpg'"  mode="widthFix"></image>
										</view>
									</view>
								</view>

								<view class="li li2">
									<view class="item">
										<view class="item-tit flex-ac">
											<text>产品介绍</text>

										</view>
										<view class="item-cont">
											<u-parse :content="content"></u-parse>

										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="null2"></view>
					</view>
				</view>
			</view>

		</view>
		<view class="g-ht"></view>
		<view class="g-dwbtn">
			<view class="g-submit1">
				点击购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',
				parkInfo: {
					title: "东湖海鲜市场",
					lx: "道路停车场",
					tc: 1,
					dz: "详细地址详细地址详细地址详细地址详细地址详细地址",
					km: 1.2,
					step: 24,
					isTop: true
				},
				content: `
					<p>东港一路东湖海鲜市场停车点月卡</p>
					<p>小型车：350元/月</p>
					<p>中型车：400元/月</p>
					<p>大型车：500元/月</p>
				`,

			}
		},
		methods: {
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/parking.scss'
</style>
<style>
	.parking-detail2 {
		padding-top: 10rpx;
	}

	.parking-place.parking-detail2 .park-cont .laybox .lay-cont {
		max-height: none;
	}

	.parking-detail.parking-detail2 .park-cont .laybox {
		position: relative;
		padding: 0;
	}

	.parking-detail2 .flex-ac,
	.parking-detail2 .flex-cb {
		flex: 1;
	}

	.parking-place.parking-detail2 .park-cont .laybox .list .li .item .row3 .step .jd.s3 {
		background-color: #FF8100;
	}

	.parking-place.parking-detail2 .park-cont .laybox .list .li .item .row3 .s3 {
		color: #FF8100;
	}

	.parking-place.parking-detail2 .park-cont .laybox .list .li .item .row3 .per {
		margin: 0 10rpx;
	}

	.parking-place.parking-detail2 .park-cont .laybox .list .li .item .row2 .left .dd .txt1 text {
		margin: 0 4rpx 0 0;
	}

	.parking-detail.parking-detail2 .park-cont .lay-cont .row4 .txt .col3 {
		position: relative;
		z-index: 1;
	}
</style>